<template>

<!--    <div class="screen-item" v-for="(content, index) in urlHistory" :key="index">
      &lt;!&ndash; 每个屏幕的内容 &ndash;&gt;
     <div style="width: 100%;height: 300px">
       <VideoPlayer ref="VideoPlayer" /></div>
    </div>-->
    <div class="screen-item">
      <div ><VideoPlayer ref="VideoPlayer0"></VideoPlayer></div>
      <div ><VideoPlayer ref="VideoPlayer1"></VideoPlayer></div>
      <div ><VideoPlayer ref="VideoPlayer2"></VideoPlayer></div>
      <div ><VideoPlayer ref="VideoPlayer3"></VideoPlayer></div>
    </div>

</template>
<script>
import VideoPlayer from '@/components/JessibucaVideo.vue'

export default {
  components:{VideoPlayer},

  props:{

    flvUrl:{
      type:String,
      required:true
    }
  },
  methods:{
    play () {
      this.flvPlayer.play();
    },
  },
  watch:{
    flvUrl(newVal,oldVal){
     // newVal = 'http://192.168.25.203:8080/live/test.live.flv'
      let clickNum = this.clickNum
      console.log("newVal",newVal)
      console.log(clickNum)

      let historyItem = clickNum % 4
      console.log(historyItem)
      this.urlHistory[historyItem] = newVal
/*      let video = "VideoPlayer"+historyItem
      console.log("video"+video)*/
     /* if (historyItem == 0){
         video = "VideoPlayer" + historyItem
      }*/
     if(historyItem == 0){
       this.$refs.VideoPlayer0.play(newVal)
     }else if (historyItem == 1){
       this.$refs.VideoPlayer1.play(newVal)
     }else if (historyItem == 3){
       this.$refs.VideoPlayer3.play(newVal)
     }else if (historyItem == 2){
       this.$refs.VideoPlayer2.play(newVal)
     }

      //this.$refs.video.values().play(newVal)
      this.clickNum++

      // this.$refs.VideoPlayer.play(newVal)
      // 如果数组长度超过4，移除第一个元素（保持数组长度为4）
 /*     if (this.urlHistory.length >= 4) {
        this.urlHistory.shift();
      }
      // 添加新地址到数组末尾
      this.urlHistory.push(newVal);
      this.$refs.VideoPlayer.play(this.urlHistory[0])
      this.$refs.VideoPlayer1.play(this.urlHistory[1])
      this.$refs.VideoPlayer2.play(this.urlHistory[2])*/

    }

  },

    beforeDestroy() {
      this.$refs.VideoPlayer1.destroy()
      this.$refs.VideoPlayer2.destroy()
      this.$refs.VideoPlayer3.destroy()
      this.$refs.VideoPlayer0.destroy()
    },
  data() {
    return {
      urlHistory:[],
      clickNum : 0
    };
  }
}
</script>
<style scoped>

.screen-item {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 定义两列，每列占据相同空间 */
  grid-template-rows: repeat(2, 300px); /* 定义两行，每行高度为 300px */
  grid-gap: 1px; /* 可选：定义网格项之间的间距 */
  width: 100%; /* 确保容器宽度为全屏 */
  height: calc(300px * 2 + 10px * 2); /* 总高度为两个视频高度加上两个间距 */
  overflow: auto; /* 如果容器高度超过视口，允许滚动 */
}

.screen-item > div {
  width: 100%; /* 确保每个网格项占据整列宽度 */
  height: 100%; /* 确保每个网格项占据整行高度 */
  /* 可选：添加其他样式，如边框、背景等 */
}

/* 假设 VideoPlayer 组件需要一些特定的样式 */
.screen-item > div VideoPlayer {
  width: 100%; /* 使得 VideoPlayer 填充其父容器 */
  height: 100%; /* 使得 VideoPlayer 填充其父容器的高度 */
}
</style>
